<script setup lang="ts">
import { computed } from 'vue'
import type { AdminProblemVO } from '@/api/Problem'
import { CloseOutlined } from '@ant-design/icons-vue'

interface Props {
  visible: boolean
  problem: AdminProblemVO | null
}

interface Emits {
  (e: 'update:visible', value: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const handleClose = () => {
  emit('update:visible', false)
}

const difficultyLabel = computed(() => {
  if (!props.problem) return ''
  const difficultyMap: Record<number, string> = {
    0: '简单',
    1: '中等',
    2: '困难',
    3: '极难'
  }
  return difficultyMap[props.problem.difficulty] || '未知'
})

const difficultyColor = computed(() => {
  if (!props.problem) return 'default'
  const colorMap: Record<number, string> = {
    0: 'green',
    1: 'blue',
    2: 'orange',
    3: 'red'
  }
  return colorMap[props.problem.difficulty] || 'default'
})

const visibleLabel = computed(() => {
  if (!props.problem) return ''
  return props.problem.visible === 1 ? '可见' : '隐藏'
})

const visibleColor = computed(() => {
  if (!props.problem) return 'default'
  return props.problem.visible === 1 ? 'green' : 'red'
})

const passRate = computed(() => {
  if (!props.problem) return '0.00%'
  const submit = Number(props.problem.submissionCount ?? 0)
  const solved = Number(props.problem.acceptedCount ?? 0)
  if (!submit || submit <= 0) return '0.00%'
  const rate = (solved / submit) * 100
  return `${rate.toFixed(2)}%`
})

const formatDateTime = (dateTime: string) => {
  if (!dateTime) return ''
  return new Date(dateTime).toLocaleString('zh-CN')
}

const judgeCases = computed(() => {
  if (!props.problem) return []
  try {
    // 如果 judgeCases 是字符串，需要解析
    if (typeof props.problem === 'string') {
      return JSON.parse(props.problem as any)
    }
    // 如果已经是对象，直接返回
    return props.problem as any
  } catch {
    return []
  }
})
</script>

<template>
  <a-drawer
    :open="visible"
    title="题目详情"
    placement="right"
    :width="800"
    @close="handleClose"
    :bodyStyle="{ padding: 0 }"
  >
    <template #closeIcon>
      <CloseOutlined class="text-gray-400 hover:text-gray-600" />
    </template>

    <div v-if="problem" class="h-full overflow-y-auto">
      <!-- 基本信息卡片 -->
      <div class="bg-gradient-to-r from-blue-50 to-indigo-50 p-6 border-b border-gray-200">
        <div class="flex items-start justify-between mb-4">
          <div class="flex-1">
            <div class="flex items-center gap-3 mb-2">
              <h2 class="text-2xl font-bold text-gray-800">{{ problem.title }}</h2>
              <a-tag :color="difficultyColor" class="text-sm">
                {{ difficultyLabel }}
              </a-tag>
              <a-tag :color="visibleColor" class="text-sm">
                {{ visibleLabel }}
              </a-tag>
            </div>
            <div class="text-sm text-gray-500">
              题目 ID: {{ problem.id }}
            </div>
          </div>
        </div>

        <!-- 统计信息 -->
        <div class="grid grid-cols-3 gap-4">
          <div class="bg-white rounded-lg p-3 shadow-sm">
            <div class="text-sm text-gray-500 mb-1">提交次数</div>
            <div class="text-xl font-semibold text-blue-600">{{ problem.submissionCount }}</div>
          </div>
          <div class="bg-white rounded-lg p-3 shadow-sm">
            <div class="text-sm text-gray-500 mb-1">通过次数</div>
            <div class="text-xl font-semibold text-green-600">{{ problem.acceptedCount }}</div>
          </div>
          <div class="bg-white rounded-lg p-3 shadow-sm">
            <div class="text-sm text-gray-500 mb-1">通过率</div>
            <div class="text-xl font-semibold text-purple-600">{{ passRate }}</div>
          </div>
        </div>
      </div>

      <!-- 详细内容 -->
      <div class="p-6 space-y-6">
        <!-- 题目描述 -->
        <div class="bg-white rounded-lg border border-gray-200 p-4">
          <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
            <span class="w-1 h-5 bg-blue-500 rounded"></span>
            题目描述
          </h3>
          <div class="text-gray-700 whitespace-pre-wrap leading-relaxed">
            {{ problem.description }}
          </div>
        </div>

        <!-- 输入描述 -->
        <div class="bg-white rounded-lg border border-gray-200 p-4">
          <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
            <span class="w-1 h-5 bg-green-500 rounded"></span>
            输入描述
          </h3>
          <div class="text-gray-700 whitespace-pre-wrap leading-relaxed">
            {{ problem.inputDescription }}
          </div>
        </div>

        <!-- 输出描述 -->
        <div class="bg-white rounded-lg border border-gray-200 p-4">
          <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
            <span class="w-1 h-5 bg-orange-500 rounded"></span>
            输出描述
          </h3>
          <div class="text-gray-700 whitespace-pre-wrap leading-relaxed">
            {{ problem.outputDescription }}
          </div>
        </div>

        <!-- 样例输入 -->
        <div class="bg-gray-50 rounded-lg border border-gray-200 p-4">
          <h3 class="text-base font-semibold text-gray-800 mb-3">样例输入</h3>
          <pre class="text-sm text-gray-700 bg-white p-3 rounded border border-gray-200 overflow-x-auto">{{ problem.sampleInput || '无' }}</pre>
        </div>

        <!-- 样例输出 -->
        <div class="bg-gray-50 rounded-lg border border-gray-200 p-4">
          <h3 class="text-base font-semibold text-gray-800 mb-3">样例输出</h3>
          <pre class="text-sm text-gray-700 bg-white p-3 rounded border border-gray-200 overflow-x-auto">{{ problem.sampleOutput || '无' }}</pre>
        </div>

        <!-- 提示 -->
        <div v-if="problem.hint" class="bg-yellow-50 rounded-lg border border-yellow-200 p-4">
          <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
            <span class="w-1 h-5 bg-yellow-500 rounded"></span>
            提示
          </h3>
          <div class="text-gray-700 whitespace-pre-wrap leading-relaxed">
            {{ problem.hint }}
          </div>
        </div>

        <!-- 判题配置 -->
        <div class="bg-white rounded-lg border border-gray-200 p-4">
          <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
            <span class="w-1 h-5 bg-purple-500 rounded"></span>
            判题配置
          </h3>
          <div class="grid grid-cols-2 gap-4">
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
              <span class="text-sm text-gray-600">时间限制</span>
              <span class="text-sm font-medium text-gray-800">{{ problem.judgeConfig.timeLimit }} ms</span>
            </div>
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
              <span class="text-sm text-gray-600">内存限制</span>
              <span class="text-sm font-medium text-gray-800">{{ problem.judgeConfig.memoryLimit }} MB</span>
            </div>
          </div>
        </div>

        <!-- 其他信息 -->
        <div class="bg-white rounded-lg border border-gray-200 p-4">
          <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
            <span class="w-1 h-5 bg-gray-500 rounded"></span>
            其他信息
          </h3>
          <div class="space-y-2">
            <div class="flex items-center justify-between p-2">
              <span class="text-sm text-gray-600">创建者ID</span>
              <span class="text-sm font-medium text-gray-800">{{ problem.createdUserId }}</span>
            </div>
            <div class="flex items-center justify-between p-2 bg-gray-50 rounded">
              <span class="text-sm text-gray-600">创建时间</span>
              <span class="text-sm font-medium text-gray-800">{{ formatDateTime(problem.createTime) }}</span>
            </div>
            <div class="flex items-center justify-between p-2">
              <span class="text-sm text-gray-600">更新时间</span>
              <span class="text-sm font-medium text-gray-800">{{ formatDateTime(problem.updateTime) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else class="h-full flex items-center justify-center">
      <a-empty description="暂无题目信息" />
    </div>
  </a-drawer>
</template>

<style scoped>
pre {
  font-family: 'Courier New', Courier, monospace;
  white-space: pre-wrap;
  word-wrap: break-word;
}

:deep(.ant-drawer-header) {
  border-bottom: 1px solid #f0f0f0;
  padding: 16px 24px;
}

:deep(.ant-drawer-body) {
  padding: 0;
}

/* 自定义滚动条 */
.overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}

.overflow-y-auto::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>
